<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开灯/关灯切换</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        img {
            width: 200px;
            height: auto;
            display: none; /* 默认隐藏 */
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 开灯图片 -->
    <img id="light-on" src="img/on.jpg" alt="开灯" style="display: none;">
    <!-- 关灯图片 -->
    <img id="light-off" src="img/off.jpg" alt="关灯" style="display: block;">
    <!-- 按钮 -->
    <button id="toggle-button" onclick="toggleLight()">开灯</button>

    <script>
        function toggleLight() {
            const lightOn = document.getElementById('light-on');
            const lightOff = document.getElementById('light-off');
            const button = document.getElementById('toggle-button');

            // 切换显示状态
            if (lightOn.style.display === 'none') {
                lightOn.style.display = 'block'; // 显示开灯图片
                lightOff.style.display = 'none'; // 隐藏关灯图片
                button.textContent = '关灯'; // 修改按钮文字为“关灯”
            } else {
                lightOn.style.display = 'none'; // 隐藏开灯图片
                lightOff.style.display = 'block'; // 显示关灯图片
                button.textContent = '开灯'; // 修改按钮文字为“开灯”
            }
        }
    </script>
</body>
</html>